<template>
<div style="min-height: 100%; background-color: #ECF0F3">
    <el-row>
        <el-col :span="15">
            <div class="pad20TB">
                <img src="../../assets/3.png" alt="" class="img2">
            </div>

        </el-col>
        <el-col :span="9">
            <div class="pad20 clearfix " style="padding-right: 0">
                <div class="commonBox2">
                    <div class="m m1">
                        <img src="../../assets/5.png" alt="" class="left70 verMid">
                        <span class="colfff font24b left60 verMid">公益项目发布</span>
                    </div>
                    <div class="m m2" style="margin-top: -20px">
                        <img src="../../assets/7.png" alt="" class="left70 verMid">
                        <span class="colfff font24b left60 verMid">公益项目承接</span>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <div class="commonBox2">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" @click="tabIndex = index" :class="index==tabIndex?'active': ''" v-for="(item, index) in tabList" :key="index">{{item}}</div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <el-row class="top10">
            <el-col :span="15">
                <el-radio-group v-model="radio1" class="top20">
                    <el-radio-button label="公益活动"></el-radio-button>
                    <el-radio-button label="服务需求"></el-radio-button>
                    <el-radio-button label="服务动态"></el-radio-button>
                </el-radio-group>

                <el-table ref="multipleTable" class="top20" :data="list" fit highlight-current-row style="width: 100%;" header-row-class-name="tableHeader">
                    <el-table-column label="活动标题" prop="a" align='center'></el-table-column>
                    <el-table-column label="发布时间" prop="b" align='center'></el-table-column>
                    <el-table-column label="人数" prop="c" align='center'></el-table-column>
                    <el-table-column label="活动状态" prop="d" align='center'></el-table-column>
                </el-table>
            </el-col>
            <el-col :span="9">
                <div class="pad20" style="padding-right: 0; ">
                    <div style="border-left: 2px solid #F5F5F5; padding-left: 20px">
                        <el-button type="primary">公益数据总览</el-button>
                        <div class="clearfix">
                            <div class="commonBox3 relative clearfix" v-for="(item, index) in sjzList" :key="index">
                                <p class="line30 col999 center font16 top20">{{item.title}}</p>
                                <div class="clearfix top10">
                                    <div class="left left30">
                                        <p> <span class="col000 font36b">{{item.num}}</span> {{item.unit}}</p>
                                    </div>
                                    <div class="right a right30 center" style="ver" :style="{background: item.bg1}">
                                        <img :src="item.ico" alt="" class="top15">
                                    </div>
                                </div>
                                <div class="line3">
                                    <div class="per" :style="{width: item.per+'%', background: item.bg2}">
                                        <span class="right col999" style="margin-top: -20px">{{item.per}}%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</div>
</template>

<script>
import Chart1 from './chart/Chart1'
import Chart2 from './chart/Chart2'
import Chart3 from './chart/Chart3'
import Chart4 from './chart/Chart4'
export default {
    components: {
        Chart1,
        Chart2,
        Chart3,
        Chart4
    },
    data() {
        return {
            sjzList: [{
                    title: '志愿服务经办机构',
                    num: '50',
                    unit: '家',
                    bg1: 'rgba(255,242,242,1)',
                    per: '29',
                    bg2: '#FF5D5D',
                    ico: require('../../assets/j1.png')
                },
                {
                    title: '志愿者',
                    num: '50',
                    unit: '人',
                    bg1: 'rgba(238,255,255,1)',
                    per: '61',
                    bg2: '#1CEDFF',
                    ico: require('../../assets/j2.png')
                },
                {
                    title: '公益服务人次',
                    num: '150',
                    unit: '人',
                    bg1: 'rgba(255,242,242,1)',
                    per: '47',
                    bg2: '#FF5D5D',
                    ico: require('../../assets/j3.png')
                },
                {
                    title: '志愿者',
                    num: '3200',
                    unit: '小时',
                    bg1: 'rgba(239,243,255,1)',
                    per: '61',
                    bg2: '#4977FC',
                    ico: require('../../assets/j4.png')
                }
            ],
            list: [{
                    a: '“公益群星”助力志愿者之城建设',
                    b: '2019-12-07 12:00',
                    c: '2',
                    d: '发布中'
                },
                {
                    a: '20个优秀志愿服务项目获表彰',
                    b: '2019-11-07 12:00',
                    c: '20',
                    d: '发布中'
                },
                {
                    a: '“2019江湖卫士”公益行动启动',
                    b: '2019-11-04 12:00',
                    c: '200',
                    d: '发布中'
                },
                {
                    a: '“适老宜居 暖巢公益行动”启动',
                    b: '2019-11-01 09:00',
                    c: '100',
                    d: '发布中'
                },
                {
                    a: '武汉妇联探索公益创投新方法',
                    b: '2019-10-07 12:00',
                    c: '50',
                    d: '发布中'
                },
            ],
            radio1: '公益活动',
            tabIndex: 0,
            tabList: ['江岸区时间银行', '江岸区时间银行', '黄陂区时间银行', '硚口区时间银行', '武昌区时间银行', '汉阳区时间银行', '江夏区时间银行']
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        const t = this;
        t.$nextTick(() => {
            t.swipper();
        })
    },
    methods: {
        swipper() {

            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 6,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });

        }
    }
};
</script>

<style scoped>
.swiper-button-next,
.swiper-button-prev {
    color: #CAD1E0 !important;
    z-index: 1000000 !important;
}

.swiper-container {
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    text-align: center;
}

.swiper-slide {
    cursor: pointer;
    border-bottom: 2px solid #ffffff;
}

.swiper-slide.active {
    color: #4977FC;
    border-bottom: 2px solid #4977FC;
}

.m {
    cursor: pointer;
    width: 100%;
    height: 180px;
    padding-top: 50px;
    box-sizing: border-box;
    background-size: 100% 100%;
}

.m1 {
    background-image: url(../../assets/4.png);
}

.m2 {
    background-image: url(../../assets/6.png);
}

.img2 {
    width: 100%;
    height: 371px;
}
</style>
